<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Slideshow</title>

	<script type="text/javascript" src="Silverlight.js"></script>
	<script type="text/javascript" src="SilverlightSpy.js"></script>
	<script type="text/javascript" src="SlideshowCreate.js"></script>
	<script type="text/javascript" src="Slideshow.js"></script>
	<script type="text/javascript" src="Slide.js"></script>
	
	<style type="text/css">
	    body,input,select{font: 8pt Verdana}
	    textarea{font-size:8pt}
	    table{background-color:#CCDDFF;width:800px}
	    .numEdit{text-align:right;width:50px}
	    .colorEdit{text-align:left;width:70px}
	    #slideshow{text-align:center}
	</style>
</head>
<body>
    <!-- Slideshow -->
	<div id="slideshow">
		<script type="text/javascript">
			createSlideshow('slideshow', {
			    width: '360px',
			    height: '360px',
			    slidesSource: '#slides',
			    slideSettings: {
                    theme: THEME_RANDOM_STACK
                }
			});
		</script>
	</div>
	<!-- Inline slides XML -->
	<script id="slides" type="text/xml"><?xml version="1.0"?>
	    <slides baseUrl="Sample/">
          <slide imageUrl="11519b14b6250344_image2.jpg" thumbnailUrl="11519b14b6250344_thumb.jpg" caption="Welcome to Silverlight Slideshow"/>
          <slide imageUrl="11519sfrd1u50499_image2.jpg" thumbnailUrl="11519sfrd1u50499_thumb.jpg" caption="A fast, lightweight image slideshow for the web"/>
          <slide imageUrl="11519fbvqzd50596_image2.jpg" thumbnailUrl="11519fbvqzd50596_thumb.jpg" caption="Smart image scaling and full screen mode"/>
          <slide imageUrl="11519qaa06150686_image2.jpg" thumbnailUrl="11519qaa06150686_thumb.jpg" caption="Fully customizable"/>
          <slide imageUrl="11519b9b12j50778_image2.jpg" thumbnailUrl="11519b9b12j50778_thumb.jpg" caption="Multiple transitions, paging support and much more"/>
          <slide imageUrl="11519ec51pj50892_image2.jpg" thumbnailUrl="11519ec51pj50892_thumb.jpg" caption="Available free of charge!"/>
          <slide imageUrl="11519458te450979_image2.jpg" thumbnailUrl="11519458te450979_thumb.jpg" caption="Brought to you by First Floor"/>
          <slide imageUrl="11519chvb6g51092_image2.jpg" thumbnailUrl="11519chvb6g51092_thumb.jpg" caption="Powered by Silverlight"/>
          <slide imageUrl="11519b14b6250344_image2.jpg" thumbnailUrl="11519b14b6250344_thumb.jpg"/>
          <slide imageUrl="11519sfrd1u50499_image2.jpg" thumbnailUrl="11519sfrd1u50499_thumb.jpg"/>
          <slide imageUrl="11519fbvqzd50596_image2.jpg" thumbnailUrl="11519fbvqzd50596_thumb.jpg"/>
          <slide imageUrl="11519qaa06150686_image2.jpg" thumbnailUrl="11519qaa06150686_thumb.jpg"/>
          <slide imageUrl="11519b9b12j50778_image2.jpg" thumbnailUrl="11519b9b12j50778_thumb.jpg"/>
          <slide imageUrl="11519ec51pj50892_image2.jpg" thumbnailUrl="11519ec51pj50892_thumb.jpg"/>
          <slide imageUrl="11519458te450979_image2.jpg" thumbnailUrl="11519458te450979_thumb.jpg"/>
          <slide imageUrl="11519chvb6g51092_image2.jpg" thumbnailUrl="11519chvb6g51092_thumb.jpg"/>
        </slides>
	</script>
	<br />
	<!-- Customization panel -->
	<table class="form">
	    <tr><td colspan="2"><b>Appearance</b></td></tr>
	    <tr><td>Background:</td><td><input id="inputBackground" type="text" value="#202020" class="colorEdit" /></td></tr>
	    <tr><td>Background Content:</td><td><input id="inputContentBackground" type="text" value="Black" class="colorEdit" /></td></tr>
	    <tr><td>Button Background:</td><td><input id="inputButtonBackground" type="text" value="Black" class="colorEdit" />
	    Foreground: <input id="inputButtonForeground" type="text" value="White" class="colorEdit" />
	    Border: <input id="inputButtonBorder" type="text" value="White" class="colorEdit" />
	    PlayButton Foreground: <input id="inputButtonPlayForeground" type="text" value="LightGreen" class="colorEdit" /></td></tr>
	    <tr><td>Caption Background:</td><td><input id="inputCaptionBackground" type="text" value="Black" class="colorEdit" />
	    Foreground: <input id="inputCaptionForeground" type="text" value="White" class="colorEdit" /></td></tr>
	    <tr><td>Caption Font:</td><td><input id="inputCaptionFontFamily" type="text" value="Verdana" />
	    Size: <input id="inputCaptionFontSize" type="text" value="11" class="numEdit" />
	    Style: <select id="inputCaptionFontStyle"><option value="Normal">Normal</option><option value="Italic">Italic</option>
            </select>
        Weight: <select id="inputCaptionFontWeight"><option value="Thin">Thin</option>
        <option value="ExtraLight">ExtraLight</option>
        <option value="Light">Light</option>
        <option value="Normal" selected="selected">Normal</option>
        <option value="Medium">Medium</option>
        <option value="SemiBold">SemiBold</option>
        <option value="Bold">Bold</option>
        <option value="ExtraBold">ExtraBold</option>
        <option value="Black">Black</option>
        <option value="ExtraBlack">ExtraBlack</option>
            </select>
	    </td></tr>
	    <tr><td>Caption Opacity:</td><td><input id="inputCaptionOpacity" type="text" value=".7" class="numEdit" /> (0-1)</td></tr>
	    <tr><td>Selected Thumbnail Color:</td><td><input id="inputSelectedThumbnailColor" type="text" value="Yellow" class="colorEdit" /></td></tr>
	    <tr><td>Tracker Foreground:</td><td><input id="inputTrackerForeground" type="text" value="Silver" class="colorEdit" /></td></tr>
	    <tr><td>Tracker Font:</td><td><input id="inputTrackerFontFamily" type="text" value="Verdana" />
	    Size: <input id="inputTrackerFontSize" type="text" value="11" class="numEdit" />
	    Style: <select id="inputTrackerFontStyle"><option value="Normal">Normal</option><option value="Italic">Italic</option>
            </select>
        Weight: <select id="inputTrackerFontWeight"><option value="Thin">Thin</option>
        <option value="ExtraLight">ExtraLight</option>
        <option value="Light">Light</option>
        <option value="Normal" selected="selected">Normal</option>
        <option value="Medium">Medium</option>
        <option value="SemiBold">SemiBold</option>
        <option value="Bold">Bold</option>
        <option value="ExtraBold">ExtraBold</option>
        <option value="Black">Black</option>
        <option value="ExtraBlack">ExtraBlack</option>
            </select>
	    </td></tr>
	    <tr><td>Border Radius:</td><td><input id="inputRadius" type="text" value="8" class="numEdit" />px</td></tr>
	    <tr><td>Padding:</td><td><input id="inputPadding" type="text" value="8" class="numEdit" />px</td></tr>
	    <tr><td>Size (width,height):</td><td><input id="inputWidth" type="text" value="360" class="numEdit" />px, <input id="inputHeight" type="text" value="360" class="numEdit" />px</td></tr>
        <tr><td colspan="2"><b>Behavior</b></td></tr>
        <tr><td>Auto Play:</td><td><input id="inputAutoPlay" type="checkbox" checked="checked" /></td></tr>
        <tr><td>Buttons:</td><td><input id="inputPlayPause" type="checkbox" checked="checked"/>Play/Pause 
        <input id="inputPrevNext" type="checkbox" checked="checked"/>Prev/Next
        <input id="inputPrevNextPage" type="checkbox" checked="checked"/>Prev/Next Page
        <input id="inputFullScreen" type="checkbox" checked="checked"/>Fullscreen
        <input id="inputSave" type="checkbox" checked="checked"/>Save
        </td></tr>
        <tr><td>Show/Hide:</td><td><input id="inputCaptionVisible" type="checkbox" checked="checked" />Captions
        <input id="inputThumbnailsVisible" type="checkbox" checked="checked" />Thumbnails
        <input id="inputTrackerVisible" type="checkbox" checked="checked" />Tracker
        </td></tr>
        <tr><td>Slide Theme:</td><td>
            <select id="inputTheme"><option value="THEME_NONE">None</option>
            <option value="THEME_STACK">Slide stack</option>
            <option value="THEME_RANDOM_STACK" selected="selected">Random positioned slide stack</option>
            <option value="THEME_RANDOM_SLIDE">Random positioned single slide</option>
            <option value="THEME_2X2">2x2 Slides</option>
            </select>
        </td></tr>
        <tr><td>Slide Animation Begin:</td><td>
            <select id="inputBeginAnimation"><option value="ANIMATION_NONE">None</option>
            <option value="ANIMATION_RANDOM">Random</option>
            <option value="ANIMATION_FADE">Fade</option>
            <option value="ANIMATION_ZOOM">Zoom</option>
            <option value="ANIMATION_LEFT_TO_RIGHT">Left to Right</option>
            <option value="ANIMATION_RIGHT_TO_LEFT">Right to Left</option>
            <option value="ANIMATION_TOP_TO_BOTTOM">Top to Bottom</option>
            <option value="ANIMATION_BOTTOM_TO_TOP">Bottom to Top</option>
            <option value="ANIMATION_ZOOM_HORIZONTAL">Zoom Horizontal</option>
            <option value="ANIMATION_ZOOM_VERTICAL">Zoom Vertical</option>
            </select>
        Animation End: <select id="inputEndAnimation"><option value="ANIMATION_NONE">None</option>
            <option value="ANIMATION_RANDOM">Random</option>
            <option value="ANIMATION_FADE">Fade</option>
            <option value="ANIMATION_ZOOM">Zoom</option>
            <option value="ANIMATION_LEFT_TO_RIGHT">Left to Right</option>
            <option value="ANIMATION_RIGHT_TO_LEFT">Right to Left</option>
            <option value="ANIMATION_TOP_TO_BOTTOM">Top to Bottom</option>
            <option value="ANIMATION_BOTTOM_TO_TOP">Bottom to Top</option>
            <option value="ANIMATION_ZOOM_HORIZONTAL">Zoom Horizontal</option>
            <option value="ANIMATION_ZOOM_VERTICAL">Zoom Vertical</option>
            </select>
        </td></tr>

        <tr><td>Speed:</td><td>
            <select id="inputSpeedRatio"><option value=".4">Very slow</option>
            <option value=".7">Slow</option>
            <option value="1" selected="selected">Normal</option>
            <option value="2">Double Time</option>
            <option value="4">Fast</option>
            <option value="6">Ultra Fast</option>
            </select>
        </td></tr>
        <tr><td>&nbsp;</td><td><input type="button" value="Customize" onclick="customize()" /></td></tr>
        <tr><td valign="top"><b>JScript Source</b></td><td><textarea id="textSource" rows="10" cols="60" wrap="off" ></textarea></td></tr>
        <tr><td colspan="2"><b>Slideshow Info</b></td></tr>
        <tr><td>Requirements:</td><td>Silverlight 1.0</td></tr>
        <tr><td>Reference:</td><td><a href="http://www.firstfloorsoftware.com/Slideshow/Reference.aspx">http://www.firstfloorsoftware.com/Slideshow/Reference.aspx</a></td></tr>
        <tr><td>Latest Sources:</td><td><a href="http://www.codeplex.com/silverlightslideshow">http://www.codeplex.com/silverlightslideshow</a></td></tr>
        <tr><td>Sample Images:</td><td>Courtesy of Martijn</td></tr>
    </table>
	<script type="text/javascript">
	    function getButtonOptions(){
	        var result = "";
	        
	        if (document.getElementById("inputPlayPause").checked){
	            result = "BUTTON_PLAYPAUSE";
	        }
	        if (document.getElementById("inputPrevNext").checked){
	            if (result)result += " | ";
	            result += "BUTTON_PREVNEXT";
	        }
	        if (document.getElementById("inputPrevNextPage").checked){
	            if (result)result += " | ";
	            result += "BUTTON_PREVNEXTPAGE";
	        }
	        if (document.getElementById("inputFullScreen").checked){
	            if (result)result += " | ";
	            result += "BUTTON_FULLSCREEN";
	        }
	        if (document.getElementById("inputSave").checked){
	            if (result)result += " | ";
	            result += "BUTTON_SAVE";
	        }
	        if (!result){
	            result = "BUTTON_NONE";
	        }
	        return result;
	    }
	    function customize(){
	        var source =    "createSlideshow('slideshow', {\r\n" +
			                "  width: '" + document.getElementById("inputWidth").value + "',\r\n" + 
			                "  height: '" + document.getElementById("inputHeight").value + "',\r\n" +
			                "  slidesSource: '#slides',\r\n" +
			                "  background: '" + document.getElementById("inputBackground").value + "',\r\n" +
			                "  buttonBackground: '" + document.getElementById("inputButtonBackground").value + "',\r\n" +
			                "  buttonForeground: '" + document.getElementById("inputButtonForeground").value + "',\r\n" +
			                "  buttonBorderColor: '" + document.getElementById("inputButtonBorder").value + "',\r\n" +
			                "  buttonPlayForeground: '" + document.getElementById("inputButtonPlayForeground").value + "',\r\n" +
			                "  captionBackground: '" + document.getElementById("inputCaptionBackground").value + "',\r\n" +
			                "  captionForeground: '" + document.getElementById("inputCaptionForeground").value + "',\r\n" +
			                "  captionFontFamily: '" + document.getElementById("inputCaptionFontFamily").value + "',\r\n" +
			                "  captionFontSize: " + document.getElementById("inputCaptionFontSize").value + ",\r\n" +
			                "  captionFontStyle: '" + document.getElementById("inputCaptionFontStyle").value + "',\r\n" +
			                "  captionFontWeight: '" + document.getElementById("inputCaptionFontWeight").value + "',\r\n" +
			                "  captionOpacity: " + document.getElementById("inputCaptionOpacity").value + ",\r\n" +
			                "  contentBackground: '" + document.getElementById("inputContentBackground").value + "',\r\n" +
			                "  selectedThumbnailBorderColor: '" + document.getElementById("inputSelectedThumbnailColor").value + "',\r\n" +
			                "  trackerForeground: '" + document.getElementById("inputTrackerForeground").value + "',\r\n" +
			                "  trackerFontFamily: '" + document.getElementById("inputTrackerFontFamily").value + "',\r\n" +
			                "  trackerFontSize: " + document.getElementById("inputTrackerFontSize").value + ",\r\n" +
			                "  trackerFontStyle: '" + document.getElementById("inputTrackerFontStyle").value + "',\r\n" +
			                "  trackerFontWeight: '" + document.getElementById("inputTrackerFontWeight").value + "',\r\n" +
			                "  borderRadius: " + document.getElementById("inputRadius").value + ",\r\n" +
			                "  padding: " + document.getElementById("inputPadding").value + ",\r\n" +
			                "  captionVisible: " + document.getElementById("inputCaptionVisible").checked + ",\r\n" +
			                "  thumbnailsVisible: " + document.getElementById("inputThumbnailsVisible").checked + ",\r\n" +
			                "  trackerVisible: " + document.getElementById("inputTrackerVisible").checked + ",\r\n" +
			                "  buttonOptions: " + getButtonOptions() + ",\r\n" +
			                "  autoPlay: " + document.getElementById("inputAutoPlay").checked + ",\r\n" +
			                "  slideSettings: {\r\n" +
			                "    animationBegin: " + document.getElementById("inputBeginAnimation").value + ",\r\n" +
			                "    animationEnd: " + document.getElementById("inputEndAnimation").value + ",\r\n" +
			                "    speedRatio: " + document.getElementById("inputSpeedRatio").value + ",\r\n" +
                            "    theme: " + document.getElementById("inputTheme").value + "\r\n" +
                            "}});";

            document.getElementById("textSource").value = source;
            eval(source);
	    }
	</script>
</body>
</html>